<div class="form-group row">
	<label for="" class="col-md-2 col-form-label">
		{{$label??'商品属性'}}
	</label>
	<div class="col-md-9" id="attr_container">
        
		<div class="form-group">
            <div id="attr_add">
                <div class="row">
                    <!-- <label for="" class="col-2">属性名称</label> -->
                    <div class="col-8">
                        <input type="text" class="form-control" placeholder="属性名称" name="attr_name">
                    </div>
                </div>

                <div class="pt-3">
                    <div class="row p-1">
                        <div class="col-4">
                            <input type="text" placeholder="可选值" class="form-control" name="attr_value">
                        </div>
                        <i class="c-icon c-icon-2xl cil-plus"></i>
                    </div>

                    <div class="row p-1">
                        <div class="col-4">
                            <input type="text" placeholder="可选值" class="form-control" name="attr_value">
                        </div>
                    </div>
                </div>
            </div>

            <div class="p-1">
                <button class="btn btn-secondary btn-layout-info" type="button">确定</button>
            </div>

            <div id="attrss">
                @if(!empty($data))
                    @foreach($data as $k=> $v)
                        <div class="form-group row">
                            @foreach(explode(',', $v->name) as $key => $v1)
                                <div class="col-sm">
                                    {{$v1}}
                                    <input class="form-control" name="attr[{{$k}}][name][]" type="hidden" value="{{$v1}}">
                                </div>
                            @endforeach

                            <div class="col-sm">
                                <input class="form-control" type="text" name="attr[{{$k}}][stock]" value="{{$v->stock??''}}">
                            </div>
                            <div class="col-sm">
                                <input class="form-control" type="text" name="attr[{{$k}}][price]" value="{{$v->price??''}}">
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            
            <!-- <div class="col-md-4">
                <input class="form-control" name="attr[name][]" type="text" placeholder="属性名称">
            </div>
            <div class="col-md-4">
                <input class="form-control" type="text" name="attr[value][]" placeholder="属性值">
            </div>
            <div class="col-md-3">
                <input class="form-control" type="text" name="attr[price][]" placeholder="价格">
            </div>
             <div class="col-md-auto" id="add_attr">
                <i class="c-icon c-icon-2xl cil-plus"></i>
            </div> -->
        </div>



	</div>
</div>

<script type="module">

	$(function() {
    //     const str = `<div class="form-group row">
    //     <div class="col-md-4">
    //         <input class="form-control" type="text" name="attr[name][]" placeholder="属性名称">
    //     </div>
    //     <div class="col-md-4">
    //         <input class="form-control" type="text" name="attr[value][]" placeholder="属性值">
    //     </div>
    //     <div class="col-md-3">
    //         <input class="form-control" name="attr[price][]" type="text" placeholder="价格">
    //     </div>
    //      <div class="col-md-1 d-flex">
    //         <i class="c-icon c-icon-2xl  cil-minus"></i>
    //     </div>
    // </div>`

		$("#add_attr").on('click', function() {
			$("#attr_container").append(str);
		})
		
		$(document).on('click', '.cil-minus', function() {
			$(this).parent().parent().remove()
		})

        $(".cil-plus").on('click', function() {
            const str = `<div class="row p-1">
                    <div class="col-4">
                        <input type="text" placeholder="可选值" class="form-control" name="attr_value">
                    </div>
                </div>`
                $(this).parent().parent().append(str)
            //alert('asdasd')
        })

        let attr_datas = [];
        let fm = '';
        let s = [];

        $(".btn-secondary").on('click', function() {

            const obj = $(this).parents('.form-group')
            const attr_name = $(obj).find("input[name=attr_name]").val()
            const val = $(obj).find("input[name=attr_value]")
            let res = [];
            $(val).each((i, v) => {
                if(v){
                    res.push($(v).val());
                }
            })

            if(attr_name && res.length > 0)
            {
                $("#attr_add").find('input').val('')
                const names = attr_datas.map(item => item.name)
                if(!names.includes(attr_name)){

                    attr_datas.push({
                        name:attr_name,
                        options:res
                    })
                }
                else
                {
                    let obj = attr_datas.find(item => item.name == attr_name)
                    obj.options = res
                }   
            }
        
            let result = []
            
            if(attr_datas.length > 0){
                $("#attrss").empty()
                attr_datas.forEach(item => {
                  if(result.length == 0)
                  {
                    result = item.options.map(item => [item])
                  }
                  else
                  {
                    let s = [];
                    item.options.forEach(i => {
                      result.forEach(r => {
                        s.push([...r, i])
                      })
                    })
                    result = s;
                  }
                })

                let titles = attr_datas.map(item => item.name)
                //console.log(titles)
                let str = '<div class="row">';

                titles.forEach(item => {
                  str += '<div class="col">'+item+'</div>';
                })
                str += '<div class="col">库存量</div><div class="col">价格</div>'
                //console.log(str)
                $("#attrss").append(str)

                result.forEach((item, idx) => {
                    let  str = '<div class="row p-1">';
                    item.forEach((i) => {
                    str +='<div class="col">'+i+'<input type="hidden" name="attr['+idx+'][name][]" value='+i+'></div>';
                    })
                    str += '<div class="col"><input class="form-control" type="number" name="attr['+idx+'][stock]"></div><div class="col"><input class="form-control" type="number" name="attr['+idx+'][price]">'
                    str += '</div>';
                    $("#attrss").append(str)
                })
            }

           


            //console.log(result)
            
        



            //if(attr_datas.length>0)
            //{
                // s = [];

                // let  obj[attr_name] = []

                // res.forEach(item => {
                //     if(item){
                        
                //         attr_datas.forEach(v => {
                //             obj[attr_name].push(v)
                //         })
                //     }
                // })
                // console.log(obj)

                // attr_datas = s;
            // }
            // else
            // {
            //     attr_datas = res
            // }
            // let str = '';
            attr_datas.forEach(item => {

            })
            //console.log(attr_datas)
        })
	})
</script>